<template>
    <div>
        <!-- Form表单 -->
        <div>
            <h1>Form表单</h1>
            <form>
                <input v-model="text">
            </form>
        </div>
        <br />
        <!-- 文本 -->
        <div>
            <p>Message is: {{ message }}</p>
            <input v-model="message" placeholder="edit me" />
        </div>
        <br />
        <!-- 多行文本 -->

        <div>
            <span>Multiline message is:</span>
            <p style="white-space: pre-line;">{{ message }}</p>
            <textarea v-model="message" placeholder="add multiple lines"></textarea>
        </div>
        <br />
        <!-- textarea -->
        <div>
            <!-- 错误 -->
            <textarea>{{ text }}</textarea>

            <!-- 正确 -->
            <textarea v-model="text"></textarea>
        </div>

        <!-- 复选框 -->
        <br />
        <div>
            <div>Checked names: {{ checkedNames }}</div>

            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
            <label for="jack">Jack</label>

            <input type="checkbox" id="john" value="John" v-model="checkedNames" />
            <label for="john">John</label>

            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
            <label for="mike">Mike</label>
        </div>
        <!-- 单选按钮 -->
        <br />
        <div>
            <div>Picked: {{ picked }}</div>
            <input type="radio" id="one" value="One" v-model="picked" />
            <label for="one">One</label>

            <input type="radio" id="two" value="Two" v-model="picked" />
            <label for="two">Two</label>
        </div>
        <br />
        <!-- 选择器 -->
        <div>
            <div>Selected: {{ selected }}</div>

            <select v-model="selected">
                <option disabled value="">Please select one</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
        </div>


        <br />

        <div>
            trim : <input v-model.trim="msg" />
            number: <input v-model.number="age" />
        </div>

    </div>


</template>

<script>

export default {
    data() {
        return {
            text: '',
            message: 'Hello Vue.js!',
            pick: 'a',
            checkedNames: ['Jack', 'John', 'Mike'],
            picked: '',
            selected: '',
            msg: ''
        }
    }
}

</script>